<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <script type="text/javascript" src="../layui/layui.js"></script>
</head>
<body>
<div id="app">
    <select name="searchField">
        <option value="bookName">图书名称</option>
        <option value="bookDesc">图书描述</option>
    </select>
    <input placeholder="请输入搜索关键词"/>
    <button type="button">搜索</button>

    <table class="layui-table">
        <thead>
        <tr>
            <th><input type="checkbox"/>全选</th>
            <th>编号</th>
            <th>名称</th>
            <th>作者</th>
            <th>价格</th>
            <th>图片</th>
            <th>出版日期</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-if="bookList.length == 0">
            <td colspan="8">
                未查询到图书信息！
            </td>
        </tr>
        <template v-if="bookList.length > 0">
            <tr v-for="book in bookList">
                <td style="width: 60px;"><input type="checkbox"/></td>
                <td>{{book.bookId}}</td>
                <td>{{book.bookName}}</td>
                <td>{{book.bookAuthor}}</td>
                <td>{{book.bookPrice}}</td>
                <td><img :src="book.bookImg" style="height: 30px;"/></td>
                <td>{{book.bookDate}}</td>
                <td style="width: 200px;">
                    <button type="button" class="layui-btn layui-btn-xs">
                        <i class="layui-icon">&#xe62a;</i> 详情
                    </button>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-xs">
                        <i class="layui-icon">&#xe642;</i> 修改
                    </button>
                    <button type="button" @click="doDelete(book.bookId)" class="layui-btn layui-btn-danger layui-btn-xs">
                        <i class="layui-icon">&#xe640;</i> 删除
                    </button>
                </td>
            </tr>
        </template>
        </tbody>
    </table>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/axios.min.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            pageNum:1,
            pageSize:10,
            bookList:[]
        },
        created(){
            this.getBookList();
        },
        methods:{
            doDelete(bid){
                if(confirm("你确定删除吗？")){
                    axios({
                        url:"/book/delete",
                        method: "delete",
                        params:{
                            bookId:bid
                        }
                    }).then(res=>{
                        let vo = res.data;
                        if(vo.code == 0){
                            alert(vo.msg);
                        }else{
                            this.getBookList();
                        }
                    });
                }
            },
            getBookList(){
                axios({
                    url:"/book/list",
                    method:"get",
                    params:{
                        pageNum:this.pageNum,
                        pageSize:this.pageSize
                    }
                }).then(res=>{
                    let vo = res.data;
                    if(vo.code == 1){
                        let pageBean = vo.data;
                        this.bookList = pageBean.data;
                    }else{
                        alert(vo.msg);
                    }
                });
            }
        }
    });
</script>
</body>
</html>